<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客管理后台登录</title>
    <!--使用semantic做博客的前端开发 引入semantic的css 和js cdn-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">
</head>
<body>

<!--中间内容-->
<div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important">
    <br>
    <br>
    <br>
<!--这里使用segment布局里面有个登录界面布局-->
    <div class="ui container">
        <div class="ui middle aligned center aligned grid">
            <div class="column">
                <h2 class="ui teal image header">
                    <div class="content">
                        管理后台登录
                    </div>
                </h2>
                <form class="ui large form"  method="post" action="#" th:action="@{/admin/login}">
                    <div class="ui  segment">
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="username" placeholder="用户名">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input type="password" name="password" placeholder="密码">
                            </div>
                        </div>
                        <button class="ui fluid large teal submit button">登  录</button>
                    </div>

                    <div class="ui error message"></div>
                    <!--前台输入用户名和密码错误，给个提示信息，从后台获取到错误信息  有没有错误信息，有的话显示，没有信息，就不会有这个提示-->
                    <div class="ui mini  negative message" th:unless="${#strings.isEmpty(message)}" th:text="${message}">用户名和密码错误</div>


                </form>

              <!--  <div class="ui message">
                </div>-->
            </div>
        </div>
    </div>
</div>
<br/>
<br/>



<!--引入jquery的cdn-->
<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<!--/*/</th:block>/*/-->
<!--这里非空校验-->
<script>

    $('.ui.form').form({
        fields : {
            username : {
                identifier : "username",
                rules:[{
                    type : "empty",
                    prompt: "请输入用户名"
                }]
            },

            password : {
                identifier : "password",
                rules:[{
                    type : "empty",
                    prompt: "请输入密码"
                }]
            }
        }

    })
</script>







<!--这里模板引用_fragment模板时，调用里面模块出错，模板解析不出该登录界面，跟控制层代码无关-->
</body>
</html>